import React, { Fragment } from 'react'
import ImageView from './base/imageView'
import { ImageBox, ListWrapper, SpanBtn } from '@/style.js'

class DmallList extends React.Component {
  render() {
    const { list, addCart, removeCart } = this.props;
    return (
      <Fragment>
        {
          list.length ? list.map((item, index) => {
            return (
              <ListWrapper className="list-wrapper" key={index}>
                <div className='left'>
                  <input type="checkbox"
                    checked={item.itemCheck}
                    onChange={() => this.handleItemCheck(item)}
                  />
                </div>
                <ImageBox>
                  <ImageView src={item.img} />
                </ImageBox>
                <SpanBtn onClick={() => {
                  addCart && addCart(index)
                }}>+</SpanBtn>
                <SpanBtn>{item.count}</SpanBtn>
                <SpanBtn onClick={() => {
                  removeCart && removeCart(index, item)
                }}>-</SpanBtn>
              </ListWrapper>)
          }) : null
        }
      </Fragment>
    )
  }

  handleItemCheck = (item) => {
    let flag = item.itemCheck;
    flag = !flag;
    const { itemEvent } = this.props;
    itemEvent && itemEvent({
      flag,
      id: item.id
    })
  }
}
export default DmallList;



